/**
 * @description System Configuration Component
 */

import React, { Component } from 'react'
import Container from '@/components/common/Container'
import { Card } from 'antd'
import { FormattedMessage } from 'react-intl'

const breadcrumbConfig = [
  {
    path: '/dashboard',
    breadcrumbName: <FormattedMessage id="i18n_common_home_page" />
  },
  {
    path: '/global-param',
    breadcrumbName: <FormattedMessage id="i18n_menu_system_manager_label" />
  },
  {
    path: '',
    breadcrumbName: <FormattedMessage id="i18n_menu_ststem_config_label" />
  }
]
const tabListNoTitle = [
  {
    key: 'certificate',
    tab: <FormattedMessage id="i18n_system_config_certificate_label" />
  },
  {
    key: 'auth',
    tab: <FormattedMessage id="i18n_system_config_auth_label" />
  }
]
const contentListNoTitle = {
  certificate: <p>this is certification</p>,
  auth: <p>auth content</p>
}

export default class OrderMgmt extends Component {
  constructor(props) {
    super(props)
    this.state = {
      key: 'certificate',
      isLoading: false,
      loadingTip: '',
      // Cancel all subscriptions and asynchronous tasks Flag
      isMounted: false
    }
  }
  componentDidMount() {
    this.setState({
      isMounted: true,
      isLoading: true
    })
    // Mock loading data
    setTimeout(() => {
      this.state.isMounted &&
        this.setState({ isLoading: false, loadingTip: '' })
    }, 5000)
  }
  componentWillUnmount() {
    // Cancel all subscriptions and asynchronous tasks
    this.setState({ isMounted: false })
  }
  onTabChange(key, type) {
    this.setState({ [type]: key })
  }
  render() {
    return (
      <Container breadcrumb={breadcrumbConfig}>
        <Card
          tabList={tabListNoTitle}
          loading={this.state.isLoading}
          activeTabKey={this.state.key}
          onTabChange={key => {
            this.onTabChange(key, 'key')
          }}
        >
          {contentListNoTitle[this.state.key]}
        </Card>
      </Container>
    )
  }
}
